<template>
  <!--    商旅申请-->
  <el-scrollbar height="635px">
    <div class="vehicle_application">
      <div class="vehicleHead">
        商旅申请
        <span class="tjj-1"><el-button color="#368DF9" :dark="isDark">提交</el-button></span>
        <span class="tjj-1"><el-button color="#368DF9" :dark="isDark">保存</el-button></span>
      </div>
      <div class="vehicleForm">

        <el-form :model="form" label-width="120px"
                 style="  width: 100% ; display: flex;
                          flex-wrap: wrap;
                          justify-content: center;
                          align-items: center;
                          margin-top: 30px;"
        >
          <el-form-item label="出差类型:">
            <el-input v-model="form.title" style="width: 300px"/>
          </el-form-item>
          <el-form-item label="出差天数:">
            <el-input v-model="form.applicant" style="width: 300px"/>
          </el-form-item>
          <el-form-item label="同行人员:">
            <el-input v-model="form.vehicleUser" style="width: 300px"/>
          </el-form-item>
          <el-form-item label="相关客户:">
            <el-input v-model="form.applicantt" style="width: 300px"/>
          </el-form-item>
          <el-form-item label="相关合同:">
            <el-input v-model="form.applicat" style="width: 300px"/>
          </el-form-item>
          <el-form-item label="经办部门:">
            <el-input v-model="form.applicat" style="width: 300px"/>
          </el-form-item>
          <el-form-item label="开始日期:">
            <el-col :span="11">
              <el-date-picker
                  v-model="form.startTime"
                  type="date"
                  placeholder="申请时间"
                  style="width: 300px"
              />
            </el-col>
          </el-form-item>
          <el-form-item label="结束日期:">
            <el-col :span="11">
              <el-date-picker
                  v-model="form.startTime"
                  type="date"
                  placeholder="申请时间"
                  style="width: 300px"
              />
            </el-col>
          </el-form-item>
          <el-form-item label="相关附件">


            <div class="flex">

              <el-button type="primary">
                上传附件<el-icon class="el-icon--right"><Upload /></el-icon>
              </el-button>
              最大10M/个
            </div>



          </el-form-item>
        </el-form>

      </div>




    </div>
  </el-scrollbar>
</template>

<script lang="ts" setup>
import {onBeforeMount, reactive, ref, toRefs} from "vue";
import type {FormInstance, FormRules} from 'element-plus'
import axios from 'axios'
import {ElMessage} from "element-plus";
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'

const roseRule = reactive<FormRules>({

})

const d = reactive({
  //table当前展示的数据
  list:null,
  //总记录
  total:0,
  //页码
  pageNo:1,
  //页大小
  pageSize:5,
  //数据
  tableData:[],
})

const form = reactive({
  // 标题
  title : '',
  // 申请人
  applicant:'',
  // 用车人
  vehicleUser : '',
  // 用车部门
  vehicleDepartment:'',
  // 车辆
  vehicle : '',
  // 司机
  driver : '',
  // 开始时间
  startTime : '',
  // 结束时间
  endTime : '',
  //  事由
  subjectMatter:'',
})

const tableData = [
  {
    ModelNo : '',
    CarNumber : '',
    State: '',
    startTime:'',
    endTime : '',
  },



]

interface Car {
  State : string
}

const tableRowClassName = ({row, rowIndex,}: {
  row: Car
  rowIndex: number
}) => {
  if (rowIndex === 1) {
    return 'warning-row'
  } else if (rowIndex === 3) {
    return 'success-row'
  }
  return ''
}

const onSubmit = () => {
  console.log('submit!')
}

</script>

<style>
.vehicle_application{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.vehicleHead{
  text-align: center;
  color: #2DB7F5;
  font-size: 30px;
  /*margin-top: 50px;*/
  /*border: 1px solid black;*/
  width: 85%;
  height: 100px;
  line-height: 100px;
  display: flex;
  justify-content: center;
  background-color: #FFFFFF;
  border-radius:  20px;
}
.tjj-1{
  position: relative;
  left: 360px;
  margin: 0px 10px;

}
.vehicleForm{
  /*border: 1px solid black;*/
  width: 85%;
  height: 350px;
  background-color: #FFFFFF;
  border-radius:  20px;
  margin-top: 10px;
}
.vehicleTable{
  width: 85%;
  margin-top: 10px;
  border-radius:  20px;
}
</style>